import React from 'react';
import { useIntl, FormattedMessage } from 'umi';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { members } from '@/services/ant-design-pro/api';
import Field from '@ant-design/pro-field';

const MemberList: React.FC = () => {
  const intl = useIntl();

  const columns: ProColumns<API.NodeListItem>[] = [
    {
      title: <FormattedMessage id="pages.searchTable.updateForm.node.name" defaultMessage="Name" />,
      dataIndex: 'Name',
      tip: 'node name',
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              console.log(entity);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: <FormattedMessage id="pages.searchTable.updateForm.node.addr" defaultMessage="Addr" />,
      dataIndex: 'Addr',
      valueType: 'textarea',
    },
    {
      title: <FormattedMessage id="pages.searchTable.updateForm.node.port" defaultMessage="Port" />,
      dataIndex: 'Port',
      valueType: 'textarea',
    },
    {
      title: <FormattedMessage id="pages.searchTable.updateForm.node.tags" defaultMessage="Tags" />,
      dataIndex: 'Tags',
      render: (dom, entity) => {
        return (
          <Field
            text={JSON.stringify(entity.Tags)}
            valueType="jsonCode"
            mode={'read'}
            plain={true}
          />
        );
      },
    },
    {
      title: (
        <FormattedMessage id="pages.searchTable.updateForm.node.status" defaultMessage="Status" />
      ),
      dataIndex: 'statusText',
      valueType: 'textarea',
    },
  ];

  return (
    <div>
      <ProTable<API.NodeListItem, API.PageParams>
        headerTitle={intl.formatMessage({
          id: 'pages.searchTable.node',
          defaultMessage: 'Node',
        })}
        rowKey="key"
        search={false}
        request={members}
        columns={columns}
      />
    </div>
  );
};

export default MemberList;
